<template>
  <main class="index" :style="{ height: startPageHeight }">
    <div class="indexPage overflow_h">
      <div class="btn-box p_w_c">
        <button
          @click="add"
          class="clearfix btn-start btn font_color_white font_weight_thin"
        >
          Start
          <!-- Start<i class="iconfont icon-arrow-right2"></i> -->
        </button>
        <div class="filter-box"></div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { defineAsyncComponent, ref, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
defineProps({});

let startPageHeight = ref(0);
const router = useRouter();
const ratio = window.devicePixelRatio;
onBeforeMount(() => {
  // console.log(window.screen.height);
  // console.log("aaa", window.screen.availHeight);
  resizeStartBox();
  // console.log(startPageHeight.value);
});

onMounted(() => {
  console.log(document.body.scrollHeight);
});

function add() {
  // alert(startPageHeight.value);
  router.push("/index");
}

function resizeStartBox() {
  startPageHeight.value = (window.screen.availHeight - 70) / ratio + "px";
}
</script>
<style scoped>
.index {
  width: 100%;
}

.indexPage {
  width: 100%;
  height: 100%;
  /* background-color: #eee; */
  display: flex;
  align-items: center;
}

.btn-box {
  width: 200px;
  height: 75px;
  position: relative;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #fff;
}

.btn {
  position: absolute;
  z-index: 1;
  border: none;
  text-decoration: none;
  outline: none;
}

.btn-start {
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-size: 18px;
}

.filter-box {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  /* z-index: -1; */
  filter: blur(6px);
  background: url(./../assets/start-bgPic.jpg) no-repeat;
  background-size: 1101%;
  background-position: -993px -560px;
  /* background-color: #fffa; */
}

.btn-start:hover {
  background: #fff8;
  color: #42a5f5;
}
</style>
